<template>
    <vue-simplebar>
        <div class="page-container">
            <el-row>
                <player-bet></player-bet>
            </el-row>
            <el-row>
                <player-gain></player-gain>
            </el-row>
            <el-row>
                <player-count></player-count>
            </el-row>
            <el-row>
                <doc-count></doc-count>
            </el-row>
        </div>
    </vue-simplebar>
</template>

<script>
import PlayerBet from "./PlayerBet.vue";
import PlayerGain from "./PlayerGain.vue";
import PlayerCount from "./PlayerCount.vue";
import DocCount from "./DocCount.vue";

export default {
    components: {
        PlayerBet,
        PlayerGain,
        PlayerCount,
        DocCount,
    },
}
</script>

<style lang="scss" scoped>
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

::v-deep .card-item {
    background-color: #ffffff;
    border-radius: 7px;
    overflow: hidden;
    height: 320px;
}

::v-deep .card-item .item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 60px;
}

::v-deep .card-item .item-chart {
    height: 260px;
}
</style>
